<template>
  <div v-if="formData.id" id="flowAuditList">
    <el-timeline>
      <el-timeline-item :timestamp="'[提交申请] '+formData.created" placement="top" type="primary">
        <div class="stepName">
          <span class="username">{{ formData.applyUserName }}</span>
        </div>
      </el-timeline-item>
      <el-timeline-item v-for="(audit, index) in formData.auditList" :key="index"
                        :timestamp="'['+audit.flowStepName+'] '+(audit.auditResult.code=='WAITING'?'等待审批':audit.updated)"
                        :type="audit.auditResult.code=='WAITING'?'':(audit.auditResult.code=='APPROVE'?'success':'danger')"
                        placement="top">
        <div class="stepName">
          <span class="username">{{ audit.auditUserName }}</span>
          <el-tag v-if="audit.auditResult.code!='WAITING'" :type="audit.auditResult.code=='APPROVE'?'success':'danger'"
                  size="mini">
            {{ audit.auditResult.name }}
          </el-tag>
        </div>
        <div v-if="audit.remark!=null">{{ audit.remark }}</div>
      </el-timeline-item>

      <el-timeline-item v-if="formData.applyStatus&&formData.applyStatus.code=='CANCEL'"
                        :timestamp="'[取消申请] '+formData.updated"
                        placement="top"
                        type="warning">
        <div class="stepName">
          <span class="username">{{ formData.applyUserName }}</span>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>

export default {
  props: {
    formData: {}
  },
};
</script>
<style scoped>
#flowAuditList {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

#flowAuditList h1 {
  margin: 20px;
}

#flowAuditList .el-timeline {
  text-align: left;
  margin-left: 100px;
  margin-top: 30px;
}

#flowAuditList .stepName {
  color: #303133;
}

#flowAuditList .username {
  color: #409EFF;
  margin-right: 5px;
}
</style>
